<html xmlns:th="http://www.thymeleaf.org" class="gr__v3_bootcss_com" lang="zh-CN"><head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <!-- The above 3 meta tags * must be * placed first, any other content * must * follow it! -->
    <meta name="description" content="zhilong's personal project">
    <meta name="author" content="zhilong">

    <title>天猫抢鞋</title>

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" th:href="@{css/bootstrap.min.css}" />
<!--    <link rel="stylesheet" href="/css/bootstrap.min.css"/>-->

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
</head>

<body data-gr-c-s-loaded="true">
<div class="container">
<div class="container-fluid">
        <div class="row">
            <div class="col-md-6">
            <input type="button" class="button btn-primary btn-lg" value="打开谷歌浏览器" onclick="RushToBuy.openChromeBrowser()">
            </div>
            <div class="col-md-6">
            <input type="button" class="button btn-primary btn-lg" value="关闭谷歌浏览器" onclick="RushToBuy.closeChromeBrowser()">
            </div>
        </div>
        <br/>
    <form id="rush2buy">
        <div class="row">
            <span class="label-info">抢购的天猫网址:</span>
            <input type="text" class="form-control input-lg" name="url" th:placeholder="(完整链接包含https或http)" value="https://m.tb.cn/h.3GBOvOL?sm=bd1969">
            <br/>
        </div>
        <div class="row">
            <span class="label-info">鞋码:</span>
            <input type="text" class="form-control input-lg" name="size" th:placeholder="size" value="42">
            <br/>
        </div>
        <div class="row">
            <span class="label-info">颜色:</span>
            <input type="text" class="form-control input-lg" name="color" th:placeholder="color" value="黑">
            <br/>
        </div>
        <div class="row">
            <input type="button" value="开始抢购" class="button btn-primary btn-lg" onclick="RushToBuy.buy()">
        </div>
    </form>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script th:src="@{js/jquery-3.3.1.min.js}"></script>
<script th:src="@{js/bootstrap.min.js}"></script>
<!-- Just to make our placeholder images work. Don't actually copy the next line! -->
<script>
    var RushToBuy = {
        openChromeBrowser : function () {
            $.ajax({
                url : "openbrowser",
                type : "GET",
                beforeSend:function (xhr) {
                    console.log("xhr.readyState : " + xhr.readyState);
                },
                success : function (data) {
                    alert(data);
                },
                error : function (xhr, errormsg, error) {
                    console.log("error msg : " + errormsg);
                    console.log("xhr.status : " + xhr.status);
                    console.log("xhr.statusText : " + xhr.statusText)
                },
                complete : function (xhr, ts) {
                    console.log("xhr.readyState : " + xhr.readyState);
                    console.log("xhr.status : " + xhr.status);
                }
            });
        },
        closeChromeBrowser : function () {
            $.ajax({
                url : "closebrowser",
                type : "GET",
                beforeSend:function (xhr) {
                    console.log("xhr.readyState : " + xhr.readyState);
                },
                success : function (data) {
                    alert(data);
                },
                error : function (xhr, errormsg, error) {
                    console.log("error msg : " + errormsg);
                    console.log("xhr.status : " + xhr.status);
                    console.log("xhr.statusText : " + xhr.statusText)
                },
                complete : function (xhr, ts) {
                    console.log("xhr.readyState : " + xhr.readyState);
                    console.log("xhr.status : " + xhr.status);
                }
            });
        },
        buy : function () {
            var form = $("#rush2buy").serialize();
            $.ajax({
                url : "rush2buy",
                type : "GET",
                data : form,
                beforeSend:function (xhr) {
                    console.log("xhr.readyState : " + xhr.readyState);
                },
                success : function (data) {
                    alert(data);
                },
                error : function (xhr, errormsg, error) {
                    console.log("error msg : " + errormsg);
                    console.log("xhr.status : " + xhr.status);
                    console.log("xhr.statusText : " + xhr.statusText)
                },
                complete : function (xhr, ts) {
                    console.log("xhr.readyState : " + xhr.readyState);
                    console.log("xhr.status : " + xhr.status);
                }
            });
        }
    }
</script>
</body>
</html>